<template>
  <div class="app-container">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-row style="position: absolute;right: 70px;z-index: 99;">
        <el-button size="small" type="danger"style="width: 100px;">保存</el-button>
      </el-row>
      <el-tabs v-model="message" @tab-click="onUserList">
        <el-tab-pane :label="`商品信息`" name="first">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="主图上传">
              <el-upload action="https://jsonplaceholder.typicode.com/posts/" v-model="form.img" list-type="picture-card" :limit="10" :on-exceed="handleExceed"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-form-item>
            <el-form-item label="视频上传">
            </el-form-item>
            <el-form-item label="商品标题" >
              <el-input type="text" placeholder="输入商品名称" v-model="form.name" style="width: 400px;" ></el-input>
            </el-form-item>
            <el-form-item label="商品介绍">
              <el-input type="textarea" placeholder="输入商品介绍" :autosize="{ minRows: 3}" style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item label="商品卖点标签">
              <el-tag :key="tag" v-for="tag in dynamicTags" closable  :disable-transitions="false" @close="handleClose(tag)">{{tag}}
              </el-tag>
              <el-input class="input-new-tag" v-if="inputVisible" style="width: 200px;" maxlength="6" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
            </el-form-item>
            <div class="fenge"></div>
            <el-form-item label="商品参数设置">
              <div style="color:#21BAA9">六边形数据雷达图参数设置</div>
            </el-form-item>
           <div class="fenge"></div>
            <el-form-item label="商品售价" >
              <el-input type="text" placeholder="输入商品价格" style="width: 400px;" ></el-input>
            </el-form-item>
            <el-form-item label="商品成本价" >
              <el-input type="text" placeholder="输入商品供应链成本价" style="width: 400px;" ></el-input>
            </el-form-item>
            <el-form-item label="商品最大销售量" >
              <el-input type="text" placeholder="输入商品预计可销售量" style="width: 400px;" ></el-input>
            </el-form-item>
            <el-form-item label="商品规格名" >
              <el-select v-model="value" placeholder="请选择" size="medium">
                <el-option v-for="item in options" :key="item.value":label="item.label":value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品规格值" >
              <el-input type="text" placeholder="输入商品规格值" style="width: 200px;" ></el-input>
            </el-form-item>
            <el-form-item label="商品货品编号" >
              <el-input type="text" placeholder="输入商品货品平台编号" style="width: 200px;" ></el-input>
            </el-form-item>
            <div class="fenge"></div>
            <el-form-item label="商品详情介绍" >
              <quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
            </el-form-item>
            <div class="fenge"></div>
            <el-form-item label="商品所属分类" >
              <el-radio-group v-model="radio" >
                <el-radio :label="3" text-color='#21BAA9'>全部</el-radio>
                <el-radio :label="6">分类1</el-radio>
                <el-radio :label="9">分类2</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="fenge"></div>
            <el-form-item label="预售设置" >
              <el-col><el-checkbox v-model="checked">开启预售</el-checkbox></el-col>
              <el-radio-group v-model="radio2" >
                <div><el-radio style="margin: 15px 0 25px;"  :label="1">全款预售</el-radio></div>
                  <el-radio-group v-model="radio1" >
                    <el-col style="margin-left: 25px;">
                     <el-radio :label="1">
                       <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker>  开始发货日期
                     </el-radio>
                    </el-col>
                    <el-col style="margin:25px 0 0 25px;">
                     <el-radio :label="2">
                      付款成功后 &nbsp;&nbsp;&nbsp;
                      <el-input-number v-model="num" @change="handleChange" :min="1" label="描述文字"></el-input-number>
                       天发货
                     </el-radio>
                    </el-col>
                  </el-radio-group>
                <div style="margin-top: 20px;"><el-radio :label="2">定金预售</el-radio></div>
                 <el-radio-group v-model="radio3" >
                   <el-col>
                     <el-breadcrumb style="margin: 28px 0 0 25px;float: left;">
                       <el-breadcrumb-item>定金支付时间</el-breadcrumb-item>
                     </el-breadcrumb>
                     <el-date-picker style="margin: 15px 25px;" v-model="value2" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                   </el-col>
                   <el-col>
                     <el-breadcrumb style="margin: 28px 0 0 25px;float: left;">
                       <el-breadcrumb-item>尾款支付时间</el-breadcrumb-item>
                     </el-breadcrumb>
                     <el-date-picker style="margin: 15px 25px;" v-model="value3" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                   </el-col>
                   <el-col style="margin-left: 25px;">
                    <el-radio :label="1">
                      <el-date-picker v-model="value4" type="date" placeholder="选择日期"> </el-date-picker>  开始发货日期
                    </el-radio>
                   </el-col>
                   <el-col style="margin:25px 0 0 25px;">
                    <el-radio :label="2">
                     付款成功后 &nbsp;&nbsp;&nbsp;
                     <el-input-number v-model="num1" @change="handleChange" :min="1" label="描述文字"></el-input-number>
                      天发货
                    </el-radio>
                   </el-col>
                   <el-col style="margin:10px 0 0 25px;">
                     <el-breadcrumb style="margin: 28px 25px 0 25px;float: left;">
                       <el-breadcrumb-item>预售定金比例设置</el-breadcrumb-item>
                     </el-breadcrumb>
                     <el-select v-model="value" placeholder="请选择" size="medium" style="margin-top: 15px;">
                      <el-option v-for="item in options" :key="item.value":label="item.label":value="item.value"> </el-option>
                     </el-select>
                   </el-col>
                 </el-radio-group>
              </el-radio-group>
            </el-form-item>
            <div class="fenge"></div>
            <el-form-item label="限购" >
              <el-col><el-checkbox v-model="checked">限制每人可购买数量</el-checkbox></el-col>
              <el-radio-group v-model="radio4" >
                <el-col><el-radio style="margin: 15px 0 0 25px"  :label="1">
                  终身限购 &nbsp;&nbsp;&nbsp; <el-input-number v-model="num1" @change="handleChange" :min="1" label="描述文字"></el-input-number>&nbsp;&nbsp;件
                </el-radio></el-col>
                <el-col><el-radio style="margin: 15px 0 15px 25px;"  :label="1">
                  按时间限购 &nbsp;&nbsp;&nbsp;
                  <el-select v-model="value" placeholder="请选择" size="medium" style="margin-top: 15px;">
                   <el-option v-for="item in options" :key="item.value":label="item.label":value="item.value"> </el-option>
                  </el-select>
                  <el-input-number v-model="num1" @change="handleChange" :min="1" label="描述文字"></el-input-number>&nbsp;&nbsp;件
                </el-radio></el-col>
              </el-radio-group>
              <el-col><el-checkbox v-model="checked">只允许会员购买</el-checkbox></el-col>
            </el-form-item>
            <div class="fenge"></div>
            <el-form-item>
              <el-button type="danger" @click="onSubmit" style="width: 150px;">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane :label="`产地信息`" name="second">
          <el-form-item label="上传头像" >
          <!-- <el-upload
            class="avatar-uploader"
            action=" 123"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload> -->
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div>

    </div>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  data() {
    return {
      message: 'first',
      dialogImageUrl: '',
      dialogVisible: false,
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      content: '',
      editorOption: {
        placeholder: 'Hello World'
      },
      radio: 3,
      checked: true,
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      num: 1,
      num1: 1,
      radio1: 1,
      radio2: 1,
      radio3: 1,
      radio4: 1,
      form: {
        img: '',
        name: ''
      }
    }
  },
  components: {
    quillEditor
  },
  methods: {
    // 图片上传
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最大上传数量为10张图片哦 ~`)
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    onEditorChange({ editor, html, text }) {
      this.content = html
    },
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleChange() {

    },
    onUserList(tab) {
      var tap = tab === 1 ? 'first' : tab.name
      console.log('---==========================', tap)
    },
    onSubmit() {
    }
  },
  mounted() { }
}
</script>

<style>
  .message-title {
    cursor: pointer;
  }

  .handle-row {
    margin-top: 30px;
  }
 .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-tabs__header{
    margin: 0 0 25px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .fenge{
    width: 100%;
    height: 1px;
    background-color: #f4f4f4;
    margin: 30px 0;
  }
  .el-select .el-input {
     width: 200px;
   }
  .tishi{
     color: #888;
     display: initial;
     margin-left: 20px;
  }
  .el-radio__input.is-checked+.el-radio__label{
    color: #888;
  }
  .el-date-editor .el-range-separator {
    width: 8%;
  }
</style>
